<template>
  <div>
    <v-card max-height="260px">
      <v-card-title>
        <!-- <span>{{t('gedan.SongList')}}</span> -->
        <v-spacer></v-spacer>
        <v-btn text color="blue" @click="dialogVisable = true">{{ t("gedan.CreateSongList") }}</v-btn>
        <v-btn text color="blue" @click="confirmClick">{{ t("from.confirm") }}</v-btn>
      </v-card-title>
      <v-card-text style="max-height: 196px; overflow: auto">
        <v-list>
          <v-list-item-group v-model="selectItemIndex">
            <v-list-item v-for="item in gedanList" :key="item.id">
              <template v-slot:default="{ active }">
                <v-list-item-action>
                  <v-checkbox :input-value="active" color="primary"></v-checkbox>
                </v-list-item-action>
                <v-list-item-title>
                  {{ item.title }}
                </v-list-item-title>
                <v-list-item-subtitle>
                  {{ t("gedan.include(" + item.list.length + ")") }}
                </v-list-item-subtitle>
              </template>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-card-text>
    </v-card>
    <v-dialog v-model="dialogVisable" persistent>
      <v-card>
        <v-card-title>{{ t("gedan.CreateSongList") }}</v-card-title>
        <v-card-text>
          <v-form ref="from">
            <v-text-field
              v-model="createGeDanName"
              :label="t('gedan.SongListName')"
              :rules="[rules.required, rules.customStrLength(10)]"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text color="red" @click="dialogVisable = false">{{ t("from.cancel") }}</v-btn>
          <v-btn text color="blue" @click="createGeDan">{{ t("from.confirm") }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
import { gedanController } from "../api/cloudbase-user-action-log";
import validate from "../plugins/validate";
import { mapGetters } from "vuex";
export default {
  name: "NewGeDanProp",
  props: {
    id: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["t"]),
  },
  data() {
    return {
      gedanList: [],
      selectItemIndex: 0,
      dialogVisable: false,
      rules: validate,
      createGeDanName: "",
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      gedanController.get().then((res) => {
        this.gedanList = res;
      });
    },
    confirmClick() {
      const currentTarget = this.gedanList[this.selectItemIndex];
      gedanController
        .addGeDanDatailList(currentTarget.id, this.id)
        .then((res) => {
          this.$jcmsg({
            msg: this.t("from.success"),
            type: "success",
          }).show();
          this.$emit("close");
        })
        .catch((err) => {
          this.$jcmsg({
            msg: err,
            type: "error",
          }).show();
        });
    },
    createGeDan() {
      if (this.$refs.from.validate()) {
        gedanController
          .add(this.createGeDanName)
          .then((res) => {
            this.$jcmsg({
              msg: this.t("from.success"),
            }).show();
            this.dialogVisable = false;
            this.init();
          })
          .catch((err) => {
            this.$jcmsg({
              msg: this.t("from.error"),
              type: "error",
            }).show();
          });
      }
    },
  },
  watch: {
    id: function (val) {
      this.id = val;
      this.init();
    },
    dialogVisable: function (val) {
      if (!val) {
        this.$refs.from.reset();
      }
    },
  },
};
</script>

<style scoped></style>
